import pClose from '@/images/common/close1.png';
import selectedPng from '@/images/common/selected3.png';
import unSelectedPng from '@/images/common/unselected.png';
import { Image, ScrollView, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import React from 'react';
import { AtFloatLayout } from 'taro-ui';
import 'taro-ui/dist/style/components/float-layout.scss';
import './index.scss';

const PointPanel = ({ onClose, point, selectedPoint, onSelect, isShowNonuse }) => {
  return (
    <View className={classNames('point-panel', { iPhoneX: Taro.$isIphoneX })}>
      <View className="header">
        <View className="title">积分</View>
        <Image className="close" src={pClose} onClick={onClose}></Image>
      </View>

      <View className="account-detail">
        <View className="left">账户积分数量：{point?.sumPoint}</View>
        <View className="right">
          每日限额：
          {point?.offsetPointMax === '-1' ? '无限制' : point?.offsetPointMax}
        </View>
      </View>

      <View className="dividing-line"></View>

      <ScrollView enableFlex scrollY className="point-list">
        {isShowNonuse ? (
          <View
            className="point-item"
            onClick={() => {
              onSelect(undefined);
            }}
          >
            <View className="selected">
              {!selectedPoint?.choosePoint ? (
                <Image className="img" src={selectedPng}></Image>
              ) : (
                <Image className="img" src={unSelectedPng}></Image>
              )}
            </View>
            <View className="info">不使用积分</View>
          </View>
        ) : null}

        {point?.choosePointList?.map((item) => {
          const { choosePoint, choosePrice } = item;
          return (
            <View
              className="point-item"
              key={choosePoint}
              onClick={() => {
                onSelect(item);
              }}
            >
              <View className="selected">
                {selectedPoint?.choosePoint === choosePoint ? (
                  <Image className="img" src={selectedPng}></Image>
                ) : (
                  <Image className="img" src={unSelectedPng}></Image>
                )}
              </View>
              <View className="info">
                抵用{choosePrice}元：使用{choosePoint}积分
              </View>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
};

const PointSelect = ({
  isOpened,
  onClose,
  point,
  selectedPoint,
  onSelect,
  isShowNonuse = false,
}) => {
  return (
    <View className={classNames('PointSelect', { iPhoneX: Taro.$isIphoneX })}>
      <AtFloatLayout isOpened={isOpened} onClose={onClose}>
        <PointPanel
          {...{
            onClose,
            point,
            selectedPoint,
            onSelect,
            isShowNonuse,
          }}
        ></PointPanel>
      </AtFloatLayout>
    </View>
  );
};
export default PointSelect;
